<template>
  <div class="layout" :style="{ height: 380 + 'px', width: '100%' }">
    <div
      class="view-height-150"
      :style="{ height: 380 + 'px', width: '50%' }"
      @click="modelNavigateTo(props.res.data.list[0])"
    >
      <image
        class="image-mode"
        :style="{ height: 380 + 'px', width: '100%' }"
        :src="props.res.data.list[0].img"
      ></image>
    </div>
    <div class="view-height-380" :style="{ height: 380 + 'px', width: '50%' }">
      <div
        class="view-height-75"
        @click="modelNavigateTo(props.res.data.list[1])"
      >
        <image
          class="image-mode"
          :style="{ height: 190 + 'px', width: '100%' }"
          :src="props.res.data.list[1].img"
        ></image>
      </div>
      <div
        class="view-height-75"
        @click="modelNavigateTo(props.res.data.list[2])"
      >
        <image
          class="image-mode"
          :style="{ height: 190 + 'px', width: '100%' }"
          :src="props.res.data.list[2].img"
        ></image>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { px2rpx } from './px2rpx'
import { modelNavigateTo } from './tpl-v3'
const props = defineProps(['res'])
</script>
<style lang="scss" scoped>
img,
image {
  display: block !important;
}

.layout {
  display: flex;
  align-items: center;
  justify-content: center;

  background-size: cover;
}
</style>
